<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vitagi - simply for life</title>
<link rel="SHORTCUT ICON" href="images/VitagiIcon.ico" />
<script type="text/javascript" src="scripts/jquery.js">"></script>
<script type="text/javascript" src="scripts/timer.js">"></script>
<script type="text/javascript" src="scripts/timeslide.js">"></script>
<style type="text/css">
	.ul-menu-horizol{
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	
	.ul-horizol{
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	
	.li-horizol{
		list-style: none;
		float: left;
		position: relative;
		margin: 0px;
		padding: 0px;
	}

	.li-menu-horizol{
		list-style: none;
		float: left;
		position: relative;
		margin: 10px 0px 0px 0px;
		padding: 0px 0px 10px 0px;
	}
	
	.li-menu-horizol span{
		margin: 5px 30px 5px 30px;
		line-height: 50px;
		font-size: 18px;
		font-weight: bold;
	}
	
	.li-menu-horizol:hover{
		cursor: pointer;
	}
	
	.ul-menu-vertical{
		list-style: none;
		margin: 0px;
		padding: 0px;
		padding-top: 3px;
		
	}
	
	.li-menu-vertical{
		list-style: none;
		margin:5px 0px 0px 0px;
		padding: 0px;
		cursor: pointer;
	}
	
	.li-menu-vertical span{
		margin: 5px 20px 5px 20px;
		line-height: 30px;
		font-size: 16px;
	}
	
	.li-menu-vertical:hover{
		background-color: #333;
	}
	
	.ul-submenu{
		position: fixed;
		top: 70px;
		padding: 0px;
		width: 230px;
		color: white;
		background-image: url("images/submenu.png");
		background-size:cover;
		overflow: hidden;
		z-index: 1000;
		font-family: "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.menu-hover{
	}
	
	#header{
		font-family: "Trebuchet MS", Helvetica, sans-serif;
		width: 100%;
		background-image: url("images/submenu.png");
		background-size:cover;
		color: white;
		height: 70px;
		position: fixed;
		z-index: 1000;
	}
	
	.logo{
		width: 100px;
		height: 50px;
	}
	
	body{
		margin: 0px;
		padding: 0px;
		font-family: "Trebuchet MS" Helvetica, sans-serif;
	}
	html{
		padding: 0px;
		margin: 0px;
	}
	
	.li-slide{
		height: 400px;
		background-color: red;
	}
	
	#focused-menu{
		height: 5px;
		width: 77px;
		top:16px;
		background-color: #00A2E8;
		position: absolute;
		z-index: 1001;
		border-radius: 3px;
		opacity:0.7;
	}
	
	#logo-vitagi{
		cursor: pointer;
	}
	
	#info-content{
		width: 1000px; 
		margin-left: auto; 
		margin-right: auto; 
		background-color: white; 
		height: 400px;
		box-shadow: 0 1px 3px #888888;
		position: relative;
		z-index: 11;
		font-family: "Trebuchet MS" Helvetica, sans-serif;
	}
	
	
	#footer{
		font-size:13px; 
		background-color: black;
		height: 70px; 
		padding-top:50px; 
		width: 100%; 
		float: left;
		margin-top: -20px; 
		color: white;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	
	#bg-footer{
		width: 100%; 
		height: 100%; 
	}
	
</style>

<script type="text/javascript">
	$(document).ready(function(e){
		var $vitaUsMenu = $("#menu-vita-us");
		var $vitaProductsMenu = $("#menu-vita-products");
		var $vitaOutsourceMenu = $("#menu-vita-outsource");
		var $focsedMenu = $("#focused-menu");
		$focsedMenu.hide().bind("mouseover", function(e){
			$(this).show();
		});
		$("#header").bind("mouseout", function(){
			$focsedMenu.hide();
		});
		 $vitaUsMenu.bind("mouseover", function(e){
			showSubMenu(this);
			showfocusedmenu($focsedMenu,$vitaUsMenu, 195);
		}).bind("mouseout", function(e){
			hideSubMenu(this);
		});
		
		 $vitaProductsMenu.bind("mouseover", function(e){
			showSubMenu(this);
			showfocusedmenu($focsedMenu,$vitaProductsMenu, 315);
		}).bind("mouseout", function(e){
			hideSubMenu(this);
		});
		
		 $vitaOutsourceMenu.bind("mouseover", function(e){
			showSubMenu(this);
			showfocusedmenu($focsedMenu,$vitaOutsourceMenu, 487);
		}).bind("mouseout", function(e){
			hideSubMenu(this);
		});
		
		$("#sub-menu-vita-us").bind("mouseover", function(e){
			showSubMenu(this, true);
			$focsedMenu.show();
			$vitaUsMenu.addClass("menu-hover");
		}).bind("mouseout", function(e){
			hideSubMenu(this, true);
			$focsedMenu.hide();
			$vitaUsMenu.removeClass("menu-hover");
		});
		
		
		$("#sub-menu-vita-products").bind("mouseover", function(e){
			showSubMenu(this, true);
			$focsedMenu.show();
			$vitaProductsMenu.addClass("menu-hover");
		}).bind("mouseout", function(e){
			hideSubMenu(this, true);
			$focsedMenu.hide();
			$vitaProductsMenu.removeClass("menu-hover");
		});
		
		$("#sub-menu-vita-outsource").bind("mouseover", function(e){
			showSubMenu(this, true);
			$focsedMenu.show();
			$vitaOutsourceMenu.addClass("menu-hover");
		}).bind("mouseout", function(e){
			hideSubMenu(this, true);
			$focsedMenu.hide();
			$vitaOutsourceMenu.removeClass("menu-hover");
		});
		
		//time slide
		var timeSlide = document.getElementById("time-slide");
		var tslide = new vitagi.timeslide({
			width: window.innerWidth,
			height: $('html').height(),
			container: timeSlide,
			slides:[
				{
					src: "images/slide1.jpg",
					width: window.innerWidth,
					height: window.innerHeight
				},
				{
					src: "images/slide2.jpg",
					width: window.innerWidth,
					height: window.innerHeight
				},
				{
					src: "images/slide3.jpg",
					width: window.innerWidth,
					height: window.innerHeight
				},
				{
					src: "images/slide4.jpg",
					width: window.innerWidth,
					height: window.innerHeight
				},
				{
					src: "images/slide5.jpg",
					width: window.innerWidth,
					height: window.innerHeight
				}
			]
		});
		
		tslide.create();
		tslide.run();
		
		$("#logo-vitagi").bind("click", function(e){
			location.href = "index.html";
		});
		
		$(".li-menu-vertical").each(function(index) {
		  	$(this).bind('click', function(e) {
			  	window.location.href = this.getAttribute("url");
			});
		});
	});
	
	function showSubMenu(obj, type){
		var submenu;		
		if(type){
			submenu = obj;
		}
		else{
			submenu = document.getElementById("sub-" + obj.id);
		}
		var items = submenu.getElementsByClassName("li-menu-vertical");
		
		$(submenu).stop().animate({
		    height: '' + (items.length * 35 + 10)
		 }, 200, function() {
		    // Animation complete.
		 });
	}
	
	function hideSubMenu(obj, type){
		var submenu;
		if(type){
			submenu = obj;
		}
		else{
			submenu = document.getElementById("sub-"+ obj.id);
		}
		$(submenu).stop().animate({
		    height: '0px'
		 }, 200, function() {
		    // Animation complete.
		 });	
	}
	
	function showfocusedmenu($obj, $menuitem, left){
		$obj.show().stop().animate({
		    width: $menuitem.find("span").first().width() + 10,
		    left: left
		 },400, "easeOutQuad", function() {
		    // Animation complete.
		 });
	}
	
	jQuery.easing["easeOutQuad"] = function(x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	}
	
	
</script>
</head>
<body>
<div id="header">
	<ul class="ul-menu-horizol">
		<li style="list-style: none; margin: 0px 10px; padding: 0px;float: left">
			<img id="logo-vitagi" style="height:50px; position: relative;top:13px" src="images/logo.png"/>
		</li>
		<li class="li-menu-horizol" id="menu-vita-us">
				<span>Vita Us</span>
		</li>
		<li class="li-menu-horizol" id="menu-vita-products">
				<span>Vita Products</span>
		</li>
		<!--<li class="li-menu-horizol" id="menu-vita-outsource">
				<span>Vita Outsourcing</span>
		</li> -->
	</ul>
	<div id="focused-menu"></div>
</div>
<div class="ul-submenu" style="left:166px; height: 0px" id="sub-menu-vita-us">
	<ul class="ul-menu-vertical">
		<!-- <li class="li-menu-vertical"><span>Member</span></li> -->
		<li class="li-menu-vertical"><span>Process</span></li>
		<!--<li class="li-menu-vertical"><span>Agility</span></li> -->
		<li class="li-menu-vertical"><span>Contact</span></li>
	</ul>
</div>
<div class="ul-submenu" style="left:293px; height: 0px" id="sub-menu-vita-products">
	<ul class="ul-menu-vertical">
		<li class="li-menu-vertical" url="http://vitago.vitagi.com/"><span>Vitago</span></li>
	</ul>
</div>
<div class="ul-submenu" style="left:480px; height: 0px" id="sub-menu-vita-outsource">
	<ul class="ul-menu-vertical">
		<li class="li-menu-vertical"><span>Web Application</span></li>
		<li class="li-menu-vertical"><span>Mobile Application</span></li>
	</ul>
</div>

<div id="time-slide">
		
</div>
<div style="height: 570px; position: relative; z-index: -10"></div>
<div id="info-content">
	<div style="float: left; width: 680px; margin: 10px 10px 5px 10px">
		<b style="color: #00A2E8; font-size: 18px">Who we are:</b><br /> Monterey offers iconic California experiences. Experience the top road trip in the United States as you wind along the breathtaking Big Sur coastline on Highway One. Book a Monterey hotel on the beach, then explore the shops and attractions of iconic Cannery Row. Sip handcrafted wines at tucked-away tasting rooms where the winemaker might just be the person pouring. <br/><br/>
		<b style="color: #00A2E8; font-size: 18px">Why we are different:</b><br /> Monterey offers iconic California experiences. Experience the top road trip in the United States as you wind along the breathtaking Big Sur coastline on Highway One. Book a Monterey hotel on the beach, then explore the shops and attractions of iconic Cannery Row. Sip handcrafted wines at tucked-away tasting rooms where the winemaker might just be the person pouring. <br/>  
	</div>
	
	<div style="float: left; width: 285px; margin: 10px 5px 5px 10px">
		<div style="color: #00A2E8; font-size: 18px; width: 100%; text-align: center; font-weight: bold">What's new?</div>Monterey offers iconic California experiences. Experience the top road trip in the United States as you wind along the breathtaking Big Sur coastline on Highway One. Book a Monterey hotel on the beach, then explore the shops and attractions of iconic Cannery Row. Sip handcrafted wines at tucked-away tasting rooms where the winemaker might just be the person pouring. 
	</div>
</div>

<div id="footer" style="">
	Copyright © 2012 The Vitagi Systems Inc, All right reserve<br/>
	User of this website signifies your agreement to the <a href="#" style="color: white;">Terms of Use</a> and <a href="#" style="color: white;">Privacy Policy and Cookies</a>
</div>
<div style="position: absolute; z-index:9;bottom:-255px; height: 400Px; width: 100%">
	<img src="images/background.png"  id="bg-footer"/>
</div>
</body>
</html>